<template>
    <div class="search-box" ref="searchScroll">
        <div>
            <div class="sort-bar">
                <div
                    class="item"
                    v-for="(item, i) in sortList"
                    :key="'typesort'+i"
                    :class="{ active:params.sort==item.sortKey }"
                    @click="reloadProduct(item.sortKey)"
                >
                    <span>{{ item.title }}</span>
                </div>
            </div>
            <ProductList :items="products" :isTip="true"></ProductList>
        </div>
    </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import BScroll from "better-scroll";
import ProductList from "../components/ProductList.vue";

export default {
    components:{
        ProductList
    },
    data() {
        return {
            params:{}
        };
    },
    computed: {
        ...mapState(["sortList"]),
        ...mapState("product",["products"])
    },
    watch:{
        "$route":{
            immediate:true,
            handler(route){
                let params = {};
                if(route.query.q){
                    params = {
                        q:route.query.q,
                        cKey:"46",
                        page:1,
                        sort:"pop"
                    }
                }
                if(route.params.fcid){
                    params = {
                        fcid:route.params.fcid,
                        title:route.params.title,
                        cKey:"16",
                        sort:"pop",
                        page:1
                    }
                }
                this.params = params;
                this.loadProductList(params);
            }
        }
    },
    methods: {
        ...mapActions("product",["loadProductList"]),
        initScroll() {
            if(this.$sc){
                    this.$sc.refresh();
            }else{
                // 因为BS本身问题，直接在mounted构建无法读取DOM元素
                // 建议在 构建对象时 使用 40ms 延迟
                setTimeout(() => {
                    this.$sc = new BScroll(this.$refs.searchScroll, {
                        click:true
                    });
                }, 40);
            }
        },
        reloadProduct(sort){
            this.params.sort = sort;
            this.loadProductList(this.params);
        }
    },
    activated(){
        // keep-alive 当前组件从缓存激活时执行的方法
        this.initScroll(); // 解决vue组件缓存导致的better-scroll 失效问题
    },
    mounted(){
        this.initScroll();
    }
};
</script>
<style lang="less" scoped>
.search-box {
    position: absolute;
    top: @h;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
}
.sort-bar {
    width: 100%;
    border-top: 1px solid @99;
    border-bottom: 1px solid @99;
    padding: 30px 0px;
    font-size: 32px;
    color: @font;
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 20px;
    .item {
        width: 100% / 3;
        text-align: center;
        border-right: 1px solid @99;
    }
    .item:last-child {
        border: none;
    }
    .item.active {
        color: @pink;
    }
}
</style>
